<template>
  <el-dialog v-el-drag-dialog :title="!form.id?'新建通知':'编辑通知'" :visible.sync="visible" :append-to-body="appendToBody" :before-close="onClose">
    <el-form ref="noticeForm" :model="form" label-width="120px" :disabled="!hasLoaded">
      <el-form-item hidden>
        <el-input v-model="form.id" hidden />
      </el-form-item>

      <el-card>
        <el-form-item prop="recipients">
          <span slot="label">
            收件人
            <el-tooltip placement="top">
              <i class="el-icon-question" />
              <div slot="content" style="width: 400px">
                多个收件人用','隔开，每个收件人可添加单独通知标记,如不添加通知标记则使用默认配置通知方式。例：sms:13012345678,email:12345678@qq.com
              </div>
            </el-tooltip>
          </span>
          <el-input
            v-model="form.recipients"
            type="textarea"
            :rows="3"
          />
        </el-form-item>
        <el-form-item label="通知方式" prop="noticeWay">
          <el-select v-model="form.noticeWay" clearable filterable>
            <el-option label="邮件通知" value="email:邮件通知" />
            <el-option label="短信通知" value="sms:短信通知" />
          </el-select>
        </el-form-item>
        <el-form-item label="通知类型">
          <el-checkbox v-model="form.startNotice" :label="1">流程开始</el-checkbox>
          <el-checkbox v-model="form.exceptionNotice" :label="1">流程异常</el-checkbox>
          <el-checkbox v-model="form.endNotice" :label="1">流程结束</el-checkbox>
        </el-form-item>
      </el-card>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button v-if="hasLoaded" type="primary" icon="el-icon-check" @click="onSubmit">确 定</el-button>
      <el-button icon="el-icon-close" @click="onClose">关 闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { spiderNoticeLoad, spiderNoticeSave } from '@/api/tool/spider'

export default {
  name: 'SpiderNoticeDialog',
  data() {
    return {
      visible: false,
      appendToBody: false,
      hasLoaded: false,
      form: {
        id: undefined,
        recipients: undefined,
        noticeWay: undefined,
        startNotice: 0,
        exceptionNotice: 0,
        endNotice: 0
      }
    }
  },
  methods: {
    init(id) {
      this.hasLoaded = false
      this.form.id = id || null
      this.visible = true
      this.$nextTick(() => {
        this.$refs.noticeForm.resetFields()
        this.loadForm(id)
      })
    },
    loadForm(id) {
      spiderNoticeLoad(id).then(response => {
        this.form = this.$api.objectUpdate(this.form, response.param)
        // 判断当前用户权限
        this.hasLoaded = this.$perm.hasPermissionOr(['manage:spider:edit', 'spider:program:edit'])
      }).catch(() => {})
    },
    onSubmit() {
      spiderNoticeSave(this.form).then(response => {
        this.$modal.msgSuccess(response.msg)
        this.$refs.noticeForm.resetFields()
        this.visible = false
      }).catch(() => {})
    },
    onClose() {
      this.$refs.noticeForm.resetFields()
      this.visible = false
    }
  }
}
</script>
